<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue开发规范</title>
  <style>
    html, body {
      font-family: 'Microsoft YaHei UI', 'Microsoft YaHei', DengXian, SimSun, 'Segoe UI', Tahoma, Helvetica, sans-serif;
      font-size: 20px;
    }

    .divModel1 {
      width: 1000px;
      height: 300px;
      border: #cccccc solid 1px;
    }
    .divModel2 {
      margin-top:30px;
      width: 1000px;
      height: 750px;
      border: #cccccc solid 1px;
    }
    .divModel3 {
      margin-top:30px;
      width: 1000px;
      height: 300px;
      border: #cccccc solid 1px;
    }
    .divModel4 {
      margin-top:30px;
      width: 1000px;
      height: 500px;
      border: #cccccc solid 1px;
    }
    .divModel5 {
      margin-top:30px;
      width: 1000px;
      height: 1900px;
      border: #cccccc solid 1px;
    }
    .divMLeft {
      margin-left: 25px;
      margin-top: 20px;
    }

    .hr-split {
      height: 30px;
      border: none;
      border-bottom: 1px solid #cccccc;
      text-align: center;
    }
  </style>
</head>
<body>
<div class="divModel1">
  <h3 class="hr-split">环境要求</h3>
  <div>1.开发工具:WebStorm 2018</div>
  <div>2.前台框架:Vue.JS 2.0</div>
  <div>3.后台工具:Visual Studio 2017</div>
  <div>4.服务器:IIS 8.0+</div>
  <div>5.Node.JS最新版</div>
  <div>6.Git:OSChina</div>
  <div>7.UI框架:mui</div>
  <div>8.交互框架:axios</div>
</div>
<div class="divModel3">
  <h3 class="hr-split">调试说明</h3>
  <div>1.打开后台程序项目</div>
  <div>2.打开IIS,先添加一个新的应用程序池,名称任意,一般取项目名称,.net版本选择.net 4.0及以上,托管管道模式:集成</div>
  <div>3.添加网站,名称取刚才新建的应用程序池同名,物理路径选择你的后台开发项目目录,ip地址选择未分配,端口号为8056</div>
  <div>4.在浏览器中访问http://127.0.0.1:8056地址,查看w3wp.exe是否存在.</div>
  <div>5.在vs开发环境中,选择主菜单,调试->附加到进程...,然后找到w3wp.exe进程并选中,然后点击[附加]按钮并确认</div>
  <div>6.打开vue项目,找到config/index.js文件,再找到host配置属性,将ip地址改为127.0.0.1,port改为8082</div>
  <div>7.在vs的core项目中,找到VueModel/VueController.cs文件在,建立断点即可调试,运行vue项目</div>
</div>
<div class="divModel2">
  <h3 class="hr-split">命名规范</h3>
  <div>
    <h5>1.组件分类法则:</h5>标签结构类,通用类,基础类,业务类
  </div>
  <div class="divMLeft">A.标签结构类(frame目录,前缀zc):这种组件主要属于架构类,如:head,body,foot,content,title等,为了与html5的元素进行区分,因此需要建立我们
    的命令规则,所以在定义组件名称的时候,命名如下zcHead,zcBody,zcFoot,zcContent,zcTitle这种属于结构类或元素类组件,这是通用结构类,还有业务结构
    类,如当前资源列表的头部可以定义成zcHead_ResourceList,又如购物车底部组件,zcFoot_ShopCar
  </div>

  <div class="divMLeft">
    B.通用类组件(common目录,前缀cm),如上传cmUpload(上传组件),cmVideo(视频播放),通用业务组件,这种主要应用于特定业务范围,如cmVideo_Resource表示只用于
    资源业务功能中显示的视频组件
  </div>
  <div class="divMLeft">
    C.基础类组件(basic目录,前缀bs),如bsPerson(人员基本信息模块组件),bsLogin(登录模块),bsRegistry(注册模块),特定类的基础模块,如bsRegistry_Resource(资源项目
    中的注册模块,bsRegistry_School(院校注册板块),按业务分类
  </div>
  <div class="divMLeft">D.普通业务组件,业务按目录分类,前缀以yw+目录首字母大写命名,如ExpertJudge(专家评审目录)下的任务列表组件应为ywEJ_TaskList,又如Leader目录下的历史模块
    应为ywL_History
  </div>
  <div style="margin-top: 20px;">
    <h5>2.图片命名法则:</h5>css文件类一定会用到图片,为了达到更换图片有效清除缓存的目的,现有两种方法处理,第一种(编码法):对图片进行base64编码成字符串,哪么如果有图片更换,重新编码后的值肯定
    不一样,这也是一种有效清缓存的做法,这种一般适合小图标,对于大图来说,就不太好了,内容太长.第二种(命名法):对图片采取有规则的命名方法,如系统登录人员默认头像def_head.jpg,应将其改为
    def_head_20190416.jpg,如果以后需要改换其它图片作为默认头像,哪么同样改为def_head_yyyymmdd.jpg,每次改图片,其名称都要不一要.注意,只改图片名称,css样式表名不能变.
  </div>

</div>
<div class="divModel4">
  <h5>3.回调方法:</h5>
  <xmp>
    this.$Global.zcServer.Post({
      IsNeedLogin:'false',//根据需求而定,有的页面要登录,有的不需要登录
      ServerUrl:'PageService/doVueLogin.ashx',//根据需求而定
      Paras:{
        Name:'VueTest',
        Action:'getOpenId',
        UserId:'A001',//根据需求而定
        Data:{
          Id:5
        }
      },
      Callback:me.cb_getOpenId,
      Scope:me
    });
    回调方法命名: 'cb_' + Action
    Action名称:后台接口名称
  </xmp>
</div>
<div class="divModel5">
  <h5>4.格式写法:</h5>
  <xmp>
  A.尽量不要用{{}}
  B.指定,格式符,操作符等要用空格隔开
  C.局部变量用let表示,值不变的可以用const
  D.let me = this;
  E.尽量用ES6的语法
  F.按钮要加阻止方法,在后台没有返回数据时,不能重复点击,同时页面要遮盖进度显示.
  G.静态不变的图片素材要放在assets目录,动态的放在static目录
  H.每个方法要加try-catch,格式如下
    zcPerson.vue
    methods : {
      doAdd() {
        let me = this;
        try{
        }
        catch(e){
          zcLogger.Log({
            Vue : 'zcPerson.vue',
            Fun : 'doAdd'
            Msg : e.message
          });
        }
      }
    }
  I.组件签名:每个程序员写的组件代码要属名,格式如下
    <!--
    作者 : 唐成
    日期 : 2019-04-20
    版本 : 1.0
    描述 : 这个组件用来做什么用
    使用 : <zcButton :Name = ''></zcButton>
    参数 :
    -->
    J. 绑定属性用冒号 : 不再用v-bind, 绑定事件用@ 不再用 v-on,同时不参在事件中直接写实现代码,
    ,写在函数中.
    K.组件格式:
    <PersonInfo
      :path="zcDomain +'static/img/ghbd.png'"
      leftClass="blue mui-icon-chatboxes"
      title="更换绑定"
      :phone=myInfo.Telephone
      text="当前手机号："
      v-on:goTo="change($event)"
    ></PersonInfo>应改成这样
    <PersonInfo
      :path = " zcDomain + 'static/img/ghbd.png' "
      :phone = myInfo.Telephone
      @:goTo = " change($event) "
      leftClass = "blue mui-icon-chatboxes"
      title = "更换绑定"
      text = "当前手机号："
    ></PersonInfo>
    字符串值用双引号表示,字串常量用单引号表示,如 " 'ABC' "
    L.语句结束要用; json最后一个字段不能加,
  </xmp>
  M.方法定义
  分为三类
  执行类,申明类,回调类的
  do_
  def_
  cb_
  N.组件定义格式
  <xmp>
    <!--
    作者 : 唐成
    日期 : 2019-04-20
    版本 : 1.0
    描述 : 这个组件用来做什么用
    使用 : <zcButton :Name = ''></zcButton>
    参数 :
    -->
    <template>
      <div>
      </div>
    </template>

    <script>
    </script>

    <style scoped>
    </style>
  </xmp>
  O.日常代码规范
  <xmp>
    function abc(p1, p2) {
      if () {
      }
    }
    let cde = function () {
    }
    let zcPublic = {
      Code: "A001",
      abc: function () {
      },
      abc: () => {
      }
    }
  </xmp>
</div>
</body>
</html>
